import {
  createMemo,
  type JSX,
  mergeProps,
  splitProps,
  type Component,
} from "solid-js";
import type { FcTextareaProps } from "./types";
import { IsNotNullOrUndefined } from "@lib/helper";
import { wrapClasses } from "@lib/types";

const FcTextarea: Component<FcTextareaProps> = (props) => {
  const [local, elProps] = splitProps(mergeProps({ type: "text" }, props), [
    "value",
    "onValueChanged",
    "ref",
    "$ServerOnly",
    "classList",
    "controlSize",
    "readonlyPlainText",
  ]);

  const classList = createMemo(() => {
    return {
      ...wrapClasses(local.classList),
      [`form-control-${local.controlSize}`]: IsNotNullOrUndefined(
        local.controlSize
      ),
      ["form-control-plaintext"]: local.readonlyPlainText,
    };
  });

  const handleOnChange: JSX.TextareaHTMLAttributes<HTMLTextAreaElement>["onChange"] =
    (el) => {
      local.onValueChanged?.(el.target.value);
    };

  return (
    <textarea
      ref={local.ref}
      class="form-control"
      value={local.value}
      onChange={handleOnChange}
      {...elProps}
      classList={classList()}
    ></textarea>
  );
};

export default FcTextarea;
